<template>
  <view class="page">
    <view class="top-img">
      <image src="./../../static/img/icon06.png" alt="">
    </view>
    <view class="section">
      <view class="page-service">
        <image :src="PayImgUrl" alt="">
      </view>
      <view class="page-payment">
        <view class="name">支付方式</view>
        <u-radio-group
			v-model="radio"
			:borderBottom="true"
			size="40"
			placement="column"
			iconPlacement="right"
		>
			<block v-for="(item,index) in payTypeList">
				<u-radio :customStyle="{marginBottom: '10px',paddingBottom:0}" v-if="item.type !== 'aliCollectConfig' && item.type !=='yeCollectConfig' && item.type !== 'jdCollectConfig'" label="微信支付" :name="item.type"  class="wx-icon" iconSize="30" labelSize="28"/>
				<u-radio :customStyle="{marginBottom:0,paddingBottom:0}" v-if="item.type === 'aliCollectConfig'" label="支付宝" name="aliCollectConfig" class='ali-icon' iconSize="30" labelSize="28"/>
			</block>
			</u-radio>
		</u-radio-group>
      </view>
      <u-button type="primary" shape="circle" color="#397EF5" @click="sumbit">支付{{ total }}元 立即激活</u-button>
    </view>
  </view>
</template> 
<script>
export default {
	data() {
		return {
		  PayImgUrl: uni.getStorageSync('imgUrl'), //页面地址
		  orderNo:'',
		  timer:null,
		  radio: 'yeCollectConfig',
		  total: uni.getStorageSync('payPrice') || 100,
		  payTypeList: [],
		}
	},
	created() {
		this.payTypeList = []
		var anzuo = uni.getSystemInfoSync().platform === 'android' ? '1' : '0'
		this.$api.payChanle({iccid: uni.getStorageSync('iccid') || '',anzuo}).then(res=>{
			for (let i = 0; i < res.data.length; i++) {
				this.payTypeList.push({type:res.data[i].typeKey,payType:res.data[i].payType});
			}
		})
		// this.selectIsAutoState()
	},
	onHide() {
		clearInterval(this.timer)
	},
	beforeDestroy(){
		clearInterval(this.timer)
	},
	onShow() {
		if(uni.getStorageSync('orderNo')) {
			this.orderChange(uni.getStorageSync('orderNo'))
		}
	},
	methods: {
		//查询支付结
		orderChange(orderNo){
			this.$api.orderState({orderNo}).then(res=>{
				if(res.code === '200'){
					uni.showModal({
						title:"支付通知",
						content:"您已完成支付！请稍后刷新页面查询到账",
						success(ress){
							uni.switchTab({
								url:"/pages/index/index"
							})
						}
					})
				}
			})
		},
		sumbit() {
			var params = {
				iccid: uni.getStorageSync('iccid') || '',
				amount: 100 * 100, //固定值
				giftBalance: 0, //固定值
				yucun: 1, //固定值
				payType: null, // 固定微信支付
			}
			if(!this.radio){
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				})
				return
			}
			var k = this.payTypeList.find(item =>item.type === this.radio)
			params.payType = k.payType
			//支付接口
			this.$api.priceOrder(params).then(res=>{
				if(res.code === '200'){
					uni.setStorageSync('orderNo',res.data.orderNo)
					if(k.payType === 80){ //支付宝h5支付
						//#ifdef H5
							window.location.href=res.data.payInfo;
						//#endif
						//#ifdef APP-PLUS
							plus.runtime.openURL(res.data.payInfo)
						//#endif
					}else if(k.payType === 88){//支付宝app支付
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data.payInfo, //支付宝订单数据
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}else if(k.payType === 20){// 微信h5支付
						// #ifdef APP-PLUS
						const platform = uni.getSystemInfoSync().platform
						// 创建一个webview
						const webview = plus.webview.create('','http://app.szxxtx.com');
						// 通过webview打开链接，后面加referer表示该链接是从哪里打开的，请填写申请h5支付的域名，比如：http://www.baidu.com,需要已备案
						switch(platform){
						  case 'android':
							webview.loadURL(res.data.payInfo,{'Referer':'http://app.szxxtx.com'});
							break;
						  case 'ios':
							webview.loadURL(res.data.payInfo,{'Referer':'http://app.szxxtx.com://'});
							break;
						  default:
							break;
						}
						// #endif
						// #ifdef H5
						window.open(res.data.payInfo);
						// #endif
					}else if(k.payType === 22||k.payType === 23||k.payType === 24){ //微信小程序支付
						//TODO
						// this.pay.wxpay(1,res.data);
						//#ifdef APP-PLUS
						var data = res.data
						plus.share.getServices(childRes => {
							let sweixin = null;
							for (let i in childRes) {
								if (childRes[i].id == 'weixin') {
									sweixin = childRes[i];
								}
							}
							//唤醒微信小程序
							if (sweixin) {
								sweixin.launchMiniProgram({
									id: 'gh_1c60bd6e4f46', //小程序原始id
									type:0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
									// path: '/pages/index/index?price=100&payType=22&orderNo=HFDKG202311010000067755' //小程序的页面,用传的参数在小程序接值判断跳转指定页面
									path: '/pages/index/index?payType='+data.payType+ '&orderNo='+data.orderNo //小程序的页面,用传的参数在小程序接值判断跳转指定页面
								},
								//目标小程序点击返回App后执行的回调,在此接收binderror="launchAppError"的参数
								res1 => {
									console.log(res1)
								},err => {
									console.log(err)
								});
							}
						});
						//#endif
					}else{ //扫码支付 
						var param = {
							orderNo:res.data.orderNo,
							payUrl:res.data.payUrl,
							payImg:res.data.payImg,
						}
						let base64 = new this.$base64()
						uni.navigateTo({
							url:'/pages/scanCodePayment/index?params='+base64.encode(JSON.stringify(param))
						})
					}
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		}

	  
	},
 
}
</script>
<style lang="scss" scoped>
.page {
  background: #F4F6FA;
  height: 100vh;
  position: relative;

  .top-img {
    width: 100%;
    height: 412upx;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .section {
    width: 93%;
    margin: 24upx auto;

    .page-service {
      width: calc(100% - 44upx);
      padding: 22upx;
      border-radius: 20upx;
      background: #fff;

      image {
        height: 300upx;
        width: 100%;
      }
    }

    .page-payment {
      border-radius: 20upx;
      background: #fff;
      margin-top: 20upx;
      width: calc(100% - 44upx);
      padding: 22upx;
      margin-bottom: 76upx;

      .name {
        padding-bottom: 36upx;
        font-size: 36upx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #28292D;
        line-height: 50upx;
      }
    }
	.wx-icon {
	  background: url('./../../static/img/icon09.png') left center no-repeat;
	  background-size:52upx 42upx;
	  padding-left: 70upx;
	  height: 40px;
		line-height: 40px;
	}

	.ali-icon {
	  background: url('./../../static/img/icon08.png') left center no-repeat;
	  background-size: 52upx 52upx;
	  padding-left: 70upx;
	  height: 40px;
	  line-height: 40px;
	}
  }
}
</style>